<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
      <link rel="stylesheet" href="/static/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
      <script type="text/javascript" src="/static/js/ztree/jquery.min.js"></script>
      <script type="text/javascript" src="/static/js/ztree/jquery.ztree.core.js"></script>
      <script type="text/javascript" src="/static/js/ztree/jquery.ztree.excheck.js"></script>
      <script type="text/javascript" src="/static/js/ztree/jquery.ztree.exedit.js"></script>
  </head>
  <body>
    <div class="x-body">
        <form class="layui-form" action="" lay-filter="component-form-group">
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-inline" style="width:200px;">
                    <input type="text" value="{{ .role.RoleName }}" autocomplete="off" class="layui-input" readonly="readonly">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">角色描述</label>
                <div class="layui-input-inline" style="width:200px;">
                    <input type="text" value="{{ .role.Desc }}" autocomplete="off" class="layui-input" readonly="readonly">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">权限树</label>
                <div class="layui-input-block">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>

                <!-- 获取角色id -->
                <input type="hidden" id="role_id" value="{{ .role.Id }}" />
                <input type="hidden" id="auth_ids" value="" >
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <div class="layui-footer" >
                            <button class="layui-btn" id="role_auth_add_btn">
                                立即提交
                            </button>
                            <a href="#" class="layui-btn layui-btn-primary">返回</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <SCRIPT type="text/javascript">
        /* 9.64 获取role_Id */
        var role_id = document.getElementById("role_id").value;
        /*/!* 前端获取数据 *!/
        var auth_arr_map = "{{ .auth_arr_map }}";
        console.log(auth_arr_map);*/
        /* 增加ajax获取 */
        $.ajax({
            url : "{{ urlfor `RoleController.GetAuthJson` }}",
            type : "GET",
            data : {
                "role_id" : role_id  /* 9.64 */
            },
            success:function (data) {
                console.log(data)
                // var zNodes = data;
                // 变更为:
                var zNodes = data["auth_arr_map"];
                var auth_ids_has = data["auth_ids_has"];   // 已选中的
                var setting = {
                    view: {
                        // addHoverDom: addHoverDom,
                        // removeHoverDom: removeHoverDom,
                        selectedMulti: false
                    },
                    check: {
                        enable: true
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    },
                    edit: {
                        enable: true
                    },
                    /* 回调 */
                    callback: {
                        beforeCheck : true,
                        onCheck : check_data,
                    }
                };
                /*var zNodes =[
                    {id:1, pId:0, name:"用户管理", open:true},
                    {id:101, pId:1, name:"用户列表"},

                    {id:2, pId:0, name:"个人中心", open:false},
                    {id:201, pId:2, name:"工资条"},


                    {id:3, pId:0, name:"财务中心", open:false},
                    {id:301, pId:3, name:"工资管理"},
                    {id:302, pId:3, name:"财务报表"},

                    {id:4, pId:0, name:"内容管理", open:false},
                    {id:401, pId:4, name:"新闻管理"},
                    {id:402, pId:4, name:"标签管理"},

                    {id:5, pId:0, name:"车辆管理", open:false},
                    {id:501, pId:5, name:"车辆管理"},
                    {id:502, pId:5, name:"车辆申请"},
                    {id:503, pId:5, name:"车辆审批"},

                    {id:6, pId:0, name:"菜单管理", open:false},
                    {id:601, pId:6, name:"菜单列表"},

                    {id:7, pId:0, name:"权限管理", open:false},
                    {id:701, pId:7, name:"权限列表"},
                    {id:702, pId:7, name:"角色列表"},

                    {id:8, pId:0, name:"报表管理", open:false},
                    {id:801, pId:8, name:"财务报表"},
                    {id:802, pId:8, name:"业务报表"},
                    {id:803, pId:8, name:"课程报表"},
                ];*/

                console.log(zNodes);

                $(document).ready(function(){
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                    /*
                    增加选中项:
                    */
                    // 初始化对象获得Id,38行定义的Id treeDemo
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");

                    // 循环获取数组内数据
                    for (var i = 0; i <auth_ids_has.length; i++){

                        // 通过Id进行绑定
                        var node = zTree.getNodeByParam("id", auth_ids_has[i]);

                        // 选中勾选
                        node.checked = true;

                        zTree.updateNode(node);

                        // 选中勾选
                        zTree.selectNode(node, true);
                    }

                });

            },
            fail:function (data) {
                alert(data)
            }
        });
        /* 增加ajax */
        var role_auth_add_btn = document.getElementById("role_auth_add_btn");
        role_auth_add_btn.onclick = function (ev) {
            var auth_ids = document.getElementById("auth_ids").value;
            var role_id = document.getElementById("role_id").value;  // 根据角色关联权限
            $.ajax({
                url : "{{ urlfor `RoleController.DoRoleAuth` }}",
                type : "POST",
                data : {
                    "role_id" : role_id,
                    "auth_ids" : auth_ids
                },
                success : function (data) {
                    alert(data)
                    if(data["code"] == 200) {
                        alert(data["msg"])
                        // 获得frame索引
                        var index = parent.layer.getFrameIndex(window.name);
                        // 关系当前frame
                        parent.layer.close(index);
                        window.location.href = "{{ urlfor `RoleController.List` }}"
                    }
                },
                fail: function (data) {
                    alert(data)
                }
            })
        }

        // 获取已勾选的数据
        function check_data (){
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            var nodes = zTree.getCheckedNodes(true);
            /* 增加ids获取 */
            var auth_ids = document.getElementById("auth_ids");
            var ids = "";
            for (var k=0; k<nodes.length;k++){
                var id = nodes[k].id;
                console.log(id);
                /* 拼接 */
                ids = id + ',' + ids;
            }
            auth_ids.value = ids;
        }

/*        var setting = {
            view: {
                // addHoverDom: addHoverDom,
                // removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: true
            }
        };
        var zNodes =[
            {id:1, pId:0, name:"用户管理", open:true},
            {id:101, pId:1, name:"用户列表"},

            {id:2, pId:0, name:"个人中心", open:false},
            {id:201, pId:2, name:"工资条"},


            {id:3, pId:0, name:"财务中心", open:false},
            {id:301, pId:3, name:"工资管理"},
            {id:302, pId:3, name:"财务报表"},

            {id:4, pId:0, name:"内容管理", open:false},
            {id:401, pId:4, name:"新闻管理"},
            {id:402, pId:4, name:"标签管理"},

            {id:5, pId:0, name:"车辆管理", open:false},
            {id:501, pId:5, name:"车辆管理"},
            {id:502, pId:5, name:"车辆申请"},
            {id:503, pId:5, name:"车辆审批"},

            {id:6, pId:0, name:"菜单管理", open:false},
            {id:601, pId:6, name:"菜单列表"},

            {id:7, pId:0, name:"权限管理", open:false},
            {id:701, pId:7, name:"权限列表"},
            {id:702, pId:7, name:"角色列表"},

            {id:8, pId:0, name:"报表管理", open:false},
            {id:801, pId:8, name:"财务报表"},
            {id:802, pId:8, name:"业务报表"},
            {id:803, pId:8, name:"课程报表"},
        ];

        console.log(zNodes);

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });*/
    </SCRIPT>
  </body>
</html>